<template>
  <div class="app-container">
    <custom-container ref="customContainerRef" :config="mainConfig" />
    <!-- 添加或修改参数配置对话框 -->
    <setForm ref="setFormRef" @changeList="handleQuery" />
  </div>
</template>
<script lang="ts" setup>
import {
  Delete,
  Refresh,
  Plus,
  Download,
  Edit,
  Document,
} from '@element-plus/icons-vue'
import { ref, getCurrentInstance, defineAsyncComponent, computed } from 'vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { useI18n } from 'vue-i18n'
import { DictDirection } from '@/store/modules/dicts'
import {
  listPost,
  getPost,
  delPost,
  addPost,
  updatePost,
} from '@/api/system/post'

const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const { t } = useI18n()
let // 选中数组
  ids = [],
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  // 日期范围
  dateRange = ref([]),
  // 查询参数
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    postCode: undefined,
    postName: undefined,
    status: undefined,
  }),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    appContext: {
      config: {
        globalProperties: { $download },
      },
    },
  } = getCurrentInstance()
// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  const postId = row?.postId || ids
  setFormRef.value.open = true
  setFormRef.value.title = '修改职级'
  setFormRef.value.getList(postId)
}
// 删除
const handleDelete = (row: { [key: string]: any }) => {
  const postId = row.postId || ids
  ElMessageBox.confirm(`是否确认删除职级编号为"${ postId }"的数据项?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => delPost(postId))
  .then((res) => {
    if (res.code === 200) {
      handleQuery()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch(() => {})
}
// 新增
const handleAdd = () => {
  setFormRef.value.open = true
  setFormRef.value.title = '新增职级'
}
// 导出
const handleExport = () => {
  $download(
    'system/post/export',
    {
      ...queryParams.value,
    },
    `职级_${ new Date().getTime() }.xlsx`,
  )
}
// 列表选择
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  ids = rows.map((item) => item.postId)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
// 主体配置
const mainConfig = computed(() => {
  const queryFields = 'system.employeeManage.post.queryFields.'
  const btns = 'system.employeeManage.post.btns.'
  const columns = 'system.employeeManage.post.columns.'
  const publicKey = 'public.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryFields }postCode`),
          prop: 'postCode',
        },
        {
          label: t(`${ queryFields }postName`),
          prop: 'postName',
        },
        {
          label: t(`${ queryFields }status`),
          prop: 'status',
          type: 'select',
          option: {
            dictInfo: { dict: DictDirection.是否禁用字典 },
          },
        },
      ],
      queryParams: queryParams.value,
      formOption: {
        labelWidth: '68px',
      },
    },
    btns: [
      {
        title: t(`${ btns }add`),
        icon: Plus,
        type: 'primary',
        onClick: handleAdd,
      },
      {
        title: t(`${ btns }edit`),
        icon: Delete,
        type: 'warning',
        onclick: handleUpdate,
          
      },
      {
        title: t(`${ btns }del`),
        icon: Delete,
        type: 'danger',
        onClick: handleDelete,
      },
      {
        title: t(`${ btns }export`),
        icon: Download,
        type: 'info',
        onClick: handleExport,
      },
    ],
    table: {
      columns: [
        { type: 'selection', minWidth: '55', align: 'center' },
        {
          label: t(`${ columns }postId`),
          prop: 'postId',
          align: 'center',
          minWidth: '90',
        },
        {
          label: t(`${ columns }postCode`),
          prop: 'postCode',
          align: 'center',
          minWidth: '90',
        },
        {
          label: t(`${ columns }postName`),
          prop: 'postName',
          align: 'center',
        },
        {
          label: t(`${ columns }postSort`),
          prop: 'postSort',
          align: 'center',
        },
        {
          label: t(`${ columns }status`),
          prop: 'status',
          align: 'center',

          autoFormatter: {
            dict: DictDirection.是否禁用字典,
            rowKey: 'status',
          },
        },
        {
          label: t(`${ columns }createTime`),
          prop: 'createTime',
          align: 'center',
        },

        {
          label: t(`${ columns }operation`),
          prop: 'opera',
          align: 'center',
          width: '200',
          showOverflowTooltip: false,
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ publicKey }edit`),
                icon: Edit,
                clickFun: handleUpdate,
              },
              {
                title: t(`${ publicKey }del`),
                icon: Delete,
                clickFun: handleDelete,
              },
            ]
            return buttons.map((el) => {
              if (
                params.index == 0
                  && el.title == '删除'
                  && params.row.deptId == 1
              ) {
                return
              }
              return h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              )
            })
          },
        },
      ],
      event: {
        onSelectionChange: (rows) => {
          handleSelectionChange(rows)
        },
      },
    },
    api: listPost,
    customKey: '/system/employeeManage/post',
  }
})
</script>
